<template>
	<div class="container">
		<van-nav-bar
		  left-arrow
		  @click-left="onClickLeft"
		  :border="false"
		  
		>		
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
		  <div slot="title" class="weight_header">我收藏的</div>
	    </van-nav-bar>
	    
	    
	   <div class="noData" v-if="showNoData">
	   	<img src="../../../../static/img/lanhu/noData.png" alt="" />
	   </div>
	   
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="padding:0 5px;" v-if="!showNoData">
		  <van-list
		    v-model="loading"
		    :finished="finished"
		    :finished-text="finishedText"
		    @load="onLoad"
		    :immediate-check="false"
		    :style="{minHeight: clientHeight + 'px' }"
		  >	
		  <div class="li" v-for="(item,index) in list" :key="index">
		  	 <div class="a">
		  	 	<div class="a_1">
		  	 		<img :src="item.avatar" alt="" class="a_1_img" v-if="item.avatar"/>
		  	 		<img src="../../../../static/img/lanhu/45.png" class="a_1_img" v-else/>	
		  	 		<span style="font-size: 13px;">{{item.nickName}}</span>
		  	 	</div>
		  	 	<div class="a_2">
		  	 		<span style="margin-right: 6px;">¥</span>
		  	 		<span>{{item.comPrice}}</span>
		  	 	</div>
		  	 </div>
		  	 
		  	 <div class="b">
		  	 	
		  	 	
		  	 	<div class="b_1 imgWrap" 
		  	  	 	:style="{backgroundImage: 'url(' + item.goodsImage + ')'}" @click="linkPreview(item)">		  	 		
		  	 	</div>   
		  	 	
		  	 	
		  	 	<div class="b_2" v-if="item.goodsCount==0">
		  	 		<img src="../../../../static/img/lanhu/25.png" alt="" class="b_img2"/>
		  	 	</div>
		  	 </div>
		  	 
		  	 <div class="c">
		  	 	<span>{{item.comName}}</span>
		  	 </div>
		  	 
		  	 <div class="d">
		  	 	<div class="d_1"></div>
		  	 	<div class="d_2"></div>
		  	 </div>
		  	 
		  	 <div class="e"> 
		  	    <img src="../../../../static/img/lanhu/26.png" alt="" 
		  	    	class="e_img" @click="showConfirm(item,index)" v-if="item.isShow"/>
		  	    <img src="../../../../static/img/lanhu2/17.png" alt="" 
		  	    	class="e_img" @click="addCollection(item,index)" v-else/>		  	    	
		  	 </div>
		  	 
		  </div>		  
		  </van-list>		
		</van-pull-refresh> 		
		
		
		
        <confirm ref="confirm" @queryConfirm="queryConfirm" title="确定取消收藏吗?"></confirm>
      

        
	</div>	
</template>

<script>	
import {getFun} from '@/api/publicFun.js'	
import confirm from '_c/confirm.vue'
let publicFun=getFun()	
export default {
	components: {
	    confirm
	},		
	data() {
       return { 
       	  loading: false,    // 是否处于数据加载状态 
	      finished: false,   // 是否处于数据最底部的状态 
	      refreshing: false, // 是否处于下拉刷新状态         
          pageNum:1,         // 当前数据的页码数
          pages:0,           // 储存数据的最大页码数
          list:[],           // 储存数据用
          url1:this.$api+'/marketorderservice/api/v1/market/findMyCollectionList', 
          url2:this.$api+'/marketorderservice/api/v1/market/deleteCart', // 取消收藏
          url3:this.$api+'/marketorderservice/api/v1/market/addCart',  // 添加收藏
          showNoData:false, // 是否显示暂无数据,
          currentData:{},     // 记录选中的当前数据
          currentDataIndex:'', // 记录当前选中数据的索引       
          userId:'',
          finishedText:''
       }
	},
	methods: {
		// 收藏事件
	    addCollection(item,index){
			let that=this
            let params={
            	userId:this.userId,
            	goodsId:item.comId
            }
		    this.$Axios2.Post(this.url3,params)
		    .then(function(res) {
               that.list[that.currentDataIndex].isShow=true
               that.$toast('操作成功')
		    })			
		},			
	   // 跳转到商品详情页
	   linkPreview(item){
  		  let arg='[{"comId":"'+item.comId+'"}]' 
  		  this.linkGoodsDetail(this.userId,item.comUid,arg)		
	   },			
	   // 取消收藏
	   queryConfirm(){
	   	  let params={
			"goodsId": this.currentData.comId,
			"userId": this.userId	   	  	
	   	  }
	   	  let that=this
	   	  this.$Axios2.Post(this.url2,params).then(function(res) {
	   	  	 that.list[that.currentDataIndex].isShow=false
	   	  })
	   },
	   showConfirm(item,index){
	   	 this.currentData=item
	   	 this.currentDataIndex=index	   	
	   	 this.$refs.confirm.showWin()
	   },
	   // 下拉刷新函数	
	   onRefresh() {
		  setTimeout(() => {
	          this.pageNum=1
	          this.list=[]
	          this.getData()	
	          this.finished = false;
	          this.loading=false
			  this.refreshing = false;
		  }, 1000);          
	   },
	   // 上拉加载函数
	   onLoad(){		   	 
		 setTimeout(() => {		 		 	
	        if (this.refreshing) {
	          this.list = [];
	          this.refreshing = false;
	        }	        
	        this.pageNum++
	        if(this.pageNum>this.pages){this.finished = true;}
	        else{
              this.getData()
	          this.loading = false;
	          this.finishedText='我也是有底线的'
	        }
	      }, 1000);   	
	  },		
       // 获取数据
       getData(){
		  let that=this
		  let params={
		  	userId:this.userId
		  }
		  this.$Axios2.postRequest(this.url1,params,{pageNum:this.pageNum,pageSize:'5'}).then(function(res) {
		  	if(res.data.page.total==0){
		  		that.showNoData=true
		  	}
		  	for(var i=0;i<res.data.page.records.length;i++){
		  		res.data.page.records[i].isShow=true
		  	}		  	
            that.list=that.list.concat(res.data.page.records)
            that.pages=res.data.page.pages
		  })	      	
       }	  
	},
	mixins:[publicFun],	
	mounted() {
	    this.userId=this.$router.currentRoute.query.userId;
	    this.getData()
	}
}	
</script>

<style scoped="" lang="scss">
*{color: #333;box-sizing: border-box;}
.container{position: absolute;left: 0;top: 0;background: #f8f8f8;min-height: 100%;width: 100%;}
.van-nav-bar{background: #FFD630;}
.li{padding: 7px;background: #fff;
  .a{display: flex;align-items: center;justify-content: space-between;
    .a_1{display: flex;align-items: center;}
    .a_1_img{width: 25px;height: 25px;border-radius: 50%;margin-right: 6px;}
    .a_2{font-size: 15px;span{color: #FF3B30;}}
  }
  .b{display: flex;justify-content: space-between;margin-top: 10px;
    .b_img2{display: block;width: 106px;}
  }
  .c{margin-top: 10px;
     span{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;display: inline-block;width:182px;font-size: 13px;font-weight: bold;}
  }
  .d{display: flex;margin-top: 8px;
    .d_1{width: 53px;}
    .d_2{flex: 1;height: 1px;background: #e5e5e5;}
  }
  .e{display: flex;justify-content: flex-end;margin-top: 10px;padding-bottom: 10px;
    .e_img{display: block;width: 91px;height: 31px;}
  }
}
.imgWrap{width: 182px;height: 120px;overflow: hidden;background-repeat: no-repeat;background-size:cover;background-position: 50% 50%;border-radius: 4px;}

</style>